Component({
  options: {
    virtualHost: true,
  },
  properties: {
    className: {
      type: String,
      value: '',
    },
    style: {
      type: String,
      value: '',
    },
    src: {
      type: String,
      value:
        '',
    },
    alt: {
      type: String,
      value: '[图片]',
    },
    fit: {
      type: String,
      value: 'fill',
    },
    mode: {
      type: String,
      value: 'scaleToFill',
    },
    lazyLoad: {
      type: Boolean,
      value: false,
    },
    showMenuByLongpress: {
      type: Boolean,
      value: false,
    },
    imgPreview: {
        type: Boolean,
        value: false
    },
    maskClosable: {
        type: Boolean,
        value: true
    }
  },
  methods: {
    load: function(e) {
      this.triggerEvent('error', e.detail);
      this.setData({
        realHeight: e.detail.height,
        realWidth: e.detail.width
      });
    },
    error: function(e) {
      this.setData({
        isError: true,
        clsx: this.properties.className + 'weda-image-error'
      });
      this.triggerEvent('error', e.detail);
    },
    onImgTap: function() {
        if(this.properties.imgPreview && !this.data.isError) {
          // 计算图片预览展示高度
          const {windowWidth, windowHeight} = wx.getSystemInfoSync();
          const showHeight = windowWidth / (this.data.realWidth / this.data.realHeight);
          const offsetHeight = windowHeight / 2 - (showHeight / 2);
            this.setData({
              showImg: true,
              zoom: 1,
              previewTranslateY: 0,
              previewTranslateX: 0,
              showHeight,
              offsetHeight
            });
        }
    },
    onPinch: function(ev) {
      let zoom = ev.detail.zoom;
      // zoom = this.data.zoom * zoom;
      if(zoom > 5) {
        zoom = 5;
      }
      if(zoom < 0.6) {
        zoom = 0.6;
      }
      this.setData({
        zoom
      });
    },
    onPressMove: function(ev) {
      this.setData({
        previewTranslateX: this.data.previewTranslateX + ev.detail.deltaX,
        previewTranslateY: this.data.previewTranslateY + ev.detail.deltaY
      });
    },
    onMaskClick: function() {
        if(this.properties.maskClosable) {
            this.setData({
                showImg: false
            });
        }
    },
    onCloseClick: function() {
        this.setData({
            showImg: false
        });
    }
  },
  data: {
    showImg: false,
    realSrc: '',
    imgMode: 'scaleToFill',
    clsx: '',
    isError: false,
    zoom: 1,
    previewTranslateX: 0,
    previewTranslateY: 0,
    realHeight: 0,
    realWidth: 0
  },
  observers: {
    className: function() {
      const className = this.properties.className;
      this.setData({
        clsx: className
      });
    },
    src: function () {
      const { src = '' } = this.properties;
      let { app } = getApp();
      if (/^cloud:\/\//.test(src)) {
        app.cloud
          .getTempFileURL(src)
          .then((res) => {
            this.setData({ realSrc: res || '' });
          })
          .catch(() => {
            this.setData({
              realSrc: src,
            });
          });
      } else {
        this.setData({
          realSrc: src,
        });
      }
    },
    'fit, mode': function(fit, mode) {
      if(fit) {
        switch(fit) {
          case 'cover':
            this.setData({
              imgMode: 'aspectFill'
            });
            break;
          case 'contain':
            this.setData({
              imgMode: 'aspectFit'
            });
            break;
          case 'fill':
            this.setData({
              imgMode: 'scaleToFill'
            });
            break;
          default:
            this.setData({
              imgMode: 'scaleToFill'
            });
            break;
        }
      } else {
        this.setData({
          imgMode: mode
        });
      }
    }
  },
});
